<template>
<div class="box">
  <div class="header head-font">节假日客流</div>

  <ul class="content-box">
    <li>
      <h3 class="title tit-font">入园时段客流分析</h3>
      <div class="chart-box" id="myChart1"></div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'History',
  data () {
    return {
      data1: [1652, 2046, 1765, 1934, 2046, 2684, 865],
      data2: [1725, 2794, 1546, 2084, 1423, 3465, 1265]
    }
  },
  mounted () {
    this.drawLine1()
  },
  methods: {
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      var option = {
        color: ['#01B2AB', '#E67050'],
        textStyle: {
          fontSize: 12
        },

        grid: {
          left: '-6%',
          right: '6%',
          bottom: '0%',
          top: '30%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          }
        },
        legend: {
          show: true,
          right: '2%',
          top: '1%',
          textStyle: {
            color: '#999',
            fontSize: 12
          },
          data: ['2019', '2020']
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: '#999'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          data: ['元旦', '春节', '清明节', '端午节', '劳动节', '国庆节', '中秋节']
        }],
        yAxis: [{
          show: false,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        }],
        series: [
          {
            name: '2019年',
            type: 'line',
            symbol: 'circle',
            symbolSize: 4,
            label: {
              normal: {
                show: true,
                position: 'top',
                fontFamily: 'DIN-Medium'
              }
            },
            itemStyle: {
              normal: {
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(247,247,247,0.4)'
                  }, {
                    offset: 1,
                    color: 'rgba(76,255,249,0.4)'
                  }])
                }
              }
            },
            data: this.data1
          },
          {
            name: '2020年',
            type: 'line',
            symbol: 'circle',
            symbolSize: 4,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(255,123,87,0)'
                  }, {
                    offset: 1,
                    color: 'rgba(255,123,87,0.4)'
                  }])
                }
              }
            },
            data: this.data2
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.content-box{
  margin-top: 50/7.5vw;
  li{
    background-color: #fff;
    border-radius: 4/7.5vw;
    padding:40/7.5vw 0;
    margin-bottom: 30/7.5vw;
    .title{
      padding:0 30/7.5vw;
      margin-bottom:-45/7.5vw;
    }
    .chart-box{
      height: 600/7.5vw;
    }
  }
}
</style>
